<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="/css/style.css" rel="stylesheet" type="text/css">
</head>

<body>
<div style="display: none">
    <input id="gt" type="text" th:value="${gt}">
    <input id="challenge" type="text" th:value="${challenge}">
    <input id="key" type="text" th:value="${key}">
</div>



<div>


    <label>验证：</label>
    <div id="captcha">
        <div id="text">
            请先生成
        </div>
        <div id="wait" class="show">
            <div class="loading">
                <div class="loading-dot"></div>
                <div class="loading-dot"></div>
                <div class="loading-dot"></div>
                <div class="loading-dot"></div>
            </div>
        </div>
    </div>
</div>
<br>

<div id="btn-gen" class="btn">验证</div>

<br><br>

<div>
    <label for="account">账号: </label>
    <input class="inp" id="account" type="text">
</div>
<br>

<div>
    <label for="password">密码: </label>
    <input class="inp" id="password" type="text">
</div>
<br>
<div>
    <div id="btn-r" class="btn">登录</div>
    <div class="btn" onclick="turnTo()" style="width: 200px">转为验证码登录</div>
</div>


<script src="/js/jquery.js"></script>
<script src="/js/gt.js"></script>
<script src="https://cdn.bootcss.com/jsencrypt/3.0.0-beta.1/jsencrypt.js"></script>
<script>


    var publicKey;
    var hash;
    function turnTo() {
        window.location.href="/appphone";
    }
    function RSA(password) {

        $.ajax({

            type: "post",

            url: "/RSA",

            cache:false,

            async:false,

            dataType: "json",

            success: function(json){
                publicKey = json.key;
                hash = json.hash;
            }

        });


        var PUBLIC_KEY = publicKey;
        var encrypt = new JSEncrypt();
        encrypt.setPublicKey(PUBLIC_KEY);
        var encrypted = encrypt.encrypt(hash+password);
        console.log('加密前数据:%o', password);
        console.log('加密后数据:%o', encrypted);
        return encrypted;
    }

    function allsubmit(validate,seccode,account,password,key,challenge){


        var temp = document.createElement("form");
        temp.action = "/loginApp";
        temp.method = "post";
        temp.style.display = "none";

        var opt = document.createElement("input");
        opt.name = "validate";
        opt.value = validate;
        //alert(opt.name+":"+opt.value);
        temp.appendChild(opt);

        var opt2 = document.createElement("input");
        opt2.name="seccode";
        opt2.value=seccode;
        temp.appendChild(opt2);

        var opt3 = document.createElement("input");
        opt3.name="account";
        opt3.value=account;
        temp.appendChild(opt3);

        var opt4 = document.createElement("input");
        opt4.name="password";
        var rsa_password = RSA(password);
        opt4.value=rsa_password;
        temp.appendChild(opt4);

        var opt5 = document.createElement("input");
        opt5.name="key";
        opt5.value=key;
        temp.appendChild(opt5);

        var opt6 = document.createElement("input");
        opt6.name="challenge";
        opt6.value=challenge;
        temp.appendChild(opt6);

        document.body.appendChild(temp);
        temp.submit();
    }
    var handler = function (captchaObj) {
        captchaObj.appendTo('#captcha');
        captchaObj.onReady(function () {
            $("#wait").hide();
            console.log(captchaObj)
        });
        $('#btn-r').click(function () {
            var result = captchaObj.getValidate();
            if (!result) {
                return alert('请完成验证');
            }

            var validate = result.geetest_validate;
            var seccode = result.geetest_seccode;
            var account = $("#account").val()
            var password = $("#password").val()
            var key = $('#key')[0].value;
            var challenge = $('#challenge')[0].value;
            allsubmit(validate,seccode,account,password,key,challenge)
        });
        // 更多前端接口说明请参见：http://docs.geetest.com/install/client/web-front/
    };

    $('#btn-gen').click(function () {
        $('#text').hide();
        $('#wait').show();
        var gt = $('#gt')[0].value;
        var challenge = $('#challenge')[0].value;
        // 调用 initGeetest 进行初始化
        // 参数1：配置参数
        // 参数2：回调，回调的第一个参数验证码对象，之后可以使用它调用相应的接口
        initGeetest({
            // 以下 4 个配置参数为必须，不能缺少
            gt: gt,
            challenge: challenge,
            offline: false, // 表示用户后台检测极验服务器是否宕机
            new_captcha: true, // 用于宕机时表示是新验证码的宕机

            product: "popup", // 产品形式，包括：float，popup
            width: "300px",
            https: true

            // 更多前端配置参数说明请参见：http://docs.geetest.com/install/client/web-front/
        }, handler);
    });
</script>
</body>

</html>